﻿<UserControl x:Class="OneTo50.UserControls.Flipper"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    xmlns:vsm="clr-namespace:System.Windows;assembly=System.Windows"
    d:DesignHeight="480" d:DesignWidth="480" Loaded="UserControl_Loaded">
    
    <Grid x:Name="LayoutRoot" Width="200" Height="200" Background="Transparent">
        <vsm:VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="FlipGroup">
                <VisualState x:Name="Status1">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="Status2">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
                <VisualStateGroup.Transitions>
                    <VisualTransition From="Status1" To="Status2">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="90">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseIn"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r2" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                                <DiscreteDoubleKeyFrame KeyTime="00:00:00.25" Value="-90" />
                                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseOut"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>

                    <VisualTransition From="Status2" To="Status1">
                        <Storyboard>
                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r2" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                                <DiscreteDoubleKeyFrame KeyTime="00:00:00" Value="0" />
                                <EasingDoubleKeyFrame KeyTime="00:00:00.2500000" Value="90">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseIn"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>

                            <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="r1" Storyboard.TargetProperty="(UIElement.Projection).(PlaneProjection.RotationY)">
                                <DiscreteDoubleKeyFrame KeyTime="00:00:00.25" Value="-90" />
                                <EasingDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0">
                                    <EasingDoubleKeyFrame.EasingFunction>
                                        <PowerEase EasingMode="EaseOut"/>
                                    </EasingDoubleKeyFrame.EasingFunction>
                                </EasingDoubleKeyFrame>
                            </DoubleAnimationUsingKeyFrames>

                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r2" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Collapsed" />
                            </ObjectAnimationUsingKeyFrames>
                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="r1" Storyboard.TargetProperty="Visibility">
                                <DiscreteObjectKeyFrame KeyTime="00:00:00.25" Value="Visible" />
                            </ObjectAnimationUsingKeyFrames>
                        </Storyboard>
                    </VisualTransition>
                </VisualStateGroup.Transitions>
            </VisualStateGroup>
        </vsm:VisualStateManager.VisualStateGroups>

        <Rectangle x:Name="r1" Fill="Red" MouseLeftButtonDown="r1_MouseLeftButtonDown" >
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>
        <Rectangle x:Name="r2" Fill="Green" MouseLeftButtonDown="r2_MouseLeftButtonDown" >
            <Rectangle.Projection>
                <PlaneProjection/>
            </Rectangle.Projection>
        </Rectangle>
    </Grid>
</UserControl>
